<template>
	<view>
		<view class="app-background"></view>
		<my-navbar title="我的" :backIcon="false"></my-navbar>
		<view class="my-header" @click="clickHeader">
			<view class="header-main" hover-class="button-hover">
				<image class="main-photo" :src="jxyUserInfo.photo ? jxyUserInfo.photo : '/static/index/headicon_none.png'" mode="aspectFit"></image>
				<view class="main-content">
					<template v-if="jxyUserInfo.token">
						<view class="content-name">
							<text>{{ jxyUserInfo.name ? jxyUserInfo.name : '--' }}</text>
							<text v-if="jxyUserInfo.teachSubject">（{{ jxyUserInfo.teachSubject }}老师）</text>
						</view>
						<view class="content-school">学校：{{ jxyUserInfo.schoolName }}</view>
						<view class="content-squad">班级：{{ squadString }}</view>
					</template>
					<template v-else>
						<view class="content-name">登录/注册</view>
					</template>
				</view>
				<image class="main-icon" src="/static/index/icon_right.png"></image>
			</view>
		</view>
		<view class="my-container">
			<view class="container-item" hover-class="button-hover" @click="clickItem('publish')">
				<image class="item-icon" src="/static/index/icon_plane.png"></image>
				<view class="item-content">
					<view class="content-text">我的发布</view>
					<image class="content-icon" src="/static/index/icon_right.png"></image>
				</view>
			</view>
			<view class="container-item" hover-class="button-hover" @click="clickItem('squad')">
				<image class="item-icon" src="/static/index/icon_message.png"></image>
				<view class="item-content">
					<view class="content-text">班级管理</view>
					<image class="content-icon" src="/static/index/icon_right.png"></image>
				</view>
			</view>
			<view class="container-item" hover-class="button-hover">
				<image class="item-icon" src="/static/index/icon_service.png"></image>
				<button v-if="isUserLogin" class="item-content" open-type="contact">
					<view class="content-text">联系客服</view>
					<image class="content-icon" src="/static/index/icon_right.png"></image>
				</button>
				<view v-else class="item-content" @click="clickItem('service')">
					<view class="content-text">联系客服</view>
					<image class="content-icon" src="/static/index/icon_right.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import logInStatusTackl from '@/common/mixin/mixinLogin.js';
export default {
	name: 'My',
	mixins: [logInStatusTackl],
	data() {
		return {
			squadList: []
		};
	},
	computed: {
		...mapState({
			jxyUserInfo: state => state.User.userInfo.jxyUserInfo
		}),
		squadString() {
			if (!this.squadList.length) return '--';
			let string = '';
			this.squadList.forEach((i, j) => {
				string += `${i.gradeName}${i.squadName}班`;
				if (j !== this.squadList.length - 1) string += '、';
			});
			return string;
		}
	},
	methods: {
		clickItem(id) {
			if (this.logInStatusTackl()) return;
			switch (id) {
				case 'publish':
					uni.navigateTo({
						url: '/packageA/pages/my/myPublish'
					});
					return;
				case 'squad':
					uni.navigateTo({
						url: '/packageA/pages/my/squadMessage'
					});
					return;
			}
		},
		async clickHeader() {
			if (this.logInStatusTackl()) return;
			uni.navigateTo({
				url: '/packageA/pages/my/userDetail'
			});
		},
		async getInfo() {
			uni.showLoading({
				mask: true
			});
			const pros = [];
			// 获取班级列表（注：用于拼接班级字符串）
			pros.push(
				this.$api.user
					.get_squad_list()
					.then(res => {
						this.squadList = res.result;
						return res;
					})
					.catch(err => {
						return err;
					})
			);
			const ress = await Promise.all(pros);
			const err = ress.find(i => i.status !== 1);
			uni.hideLoading();
			if (err) this.$showToast(err.message);
		},
		async handleShow() {
			if (!this.jxyUserInfo.token) return;
			try {
				await this.getInfo();
			} catch (err) {}
		},
		async handlePullDownRefresh() {
			if (!this.jxyUserInfo.token) {
				uni.stopPullDownRefresh();
				return;
			}
			try {
				await this.getInfo();
			} catch (err) {}
			uni.stopPullDownRefresh();
		}
	},
	async created() {
		if (!this.jxyUserInfo.token) return;
		try {
			await this.getInfo();
		} catch (err) {}
	}
};
</script>

<style lang="less" scoped>
.my-header {
	background-color: #ffffff;

	.header-main {
		padding: 30rpx;

		transition: all 0.3s;

		display: flex;
		align-items: center;
		justify-content: space-between;

		.main-photo {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}
		.main-content {
			flex: 1;

			overflow: hidden;

			.content-name {
				height: 38rpx;
				margin-bottom: 20rpx;
				
				font-weight: 700;
				color: #222222;
			}
			.content-school {
				font-size: 28rpx;
				color: #808080;
				margin-bottom: 10rpx;
			}
			.content-squad {
				font-size: 28rpx;
				color: #808080;

				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.main-icon {
			width: 13rpx;
			height: 23rpx;
		}
	}
}

.my-container {
	background-color: #ffffff;
	margin-top: 20rpx;
	.container-item {
		display: flex;
		align-items: center;

		transition: all 0.3s;

		.item-icon {
			width: 42rpx;
			height: 42rpx;
			margin: 0 30rpx;
		}
		.item-content {
			line-height: 48rpx;
			background-color: transparent;

			flex: 1;
			color: #222222;
			font-size: 32rpx;
			font-weight: 500;
			border-bottom: 2rpx solid #e3e4e6;

			display: flex;
			align-items: center;
			justify-content: space-between;

			padding: 40rpx 0;
			padding-right: 30rpx;

			.content-icon {
				width: 13rpx;
				height: 23rpx;
			}
		}

		&:last-child {
			.item-content {
				border-bottom: none;
			}
		}
	}
}

button::after {
	border: none;
}
</style>
